<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验4 函数</title>
</head>
<body>
    1. 通过arguments调用函数 demo2.html
    <script>
        function getSum(){
            var sum=0;
            for(var i in arguments){//遍历参数
                sum+=arguments[i];
                
            }
            return sum;
        }
        var s=getSum(10,20,30,40,50);
        console.log(getSum(10,20,30));
    </script>
2. 网页计算器 -教材
<P>整数1：<input id="num1" type="text"></P>
<P>整数2：<input id="num2" type="text"></P>
<P>
    <input type="button" value="相加" onclick="calc(add)">
    <input type="button" value="相减" onclick="calc(sub)">
    <input type="button" value="相乘" onclick="calc(mul)">
    <input type="button" value="相除" onclick="calc(div)">
    
</P>
<P>结果：<input type="text" id="result" readonly></P>
<script>
    function calc(func){
        var result=document.getElementById('result');
        var num1=parseInt(document.getElementById('num1').value);
         var num2=parseInt(document.getElementById('num2').value);
         if(isNaN(num1)||isNaN(num2)){
             alert('请输入数字');
             return false;
         }
         result.value=func(num1,num2);
    };
    function add(num1,num2){
        return num1+num2;
    };
    function sub(num1,num2){
        return num1-num2;
    };
    function mul(num1,num2){
        return num1*num2;
    }
    function div(num1,num2){
        if (num2==0){
            alert('除数不能为0');
            return'';
        }
        return num1/num2;
    }
</script>
3. 编写函数实现单击change按钮，为div元素添加红色双线边框。
<style>
div{ width:200px; height: 200px; border:1px solid;}  
 </style>
<div></div>
 <p ><button id="btn">change </button></p> 
 <script> 
 var btn = document.getElementById('btn');
   var div = document.getElementsByTagName('div')[0]; 
   btn.onclick = function () { div.style.border = 'double red'; }
   </script>
 





4. 计算器的复杂案例-参考职教云-一个典型的计算器案例
    <h2>简易计算器</h2>
    <form name="myform" method="post">
    <table border="1" bordercolor="#003300">
    <tr>
    <td colspan="3"><input type="text" name="result" style="width:250px; text-align:right" onChange="CheckNumber(this.value)"></td>
    </td>
    </tr>
    <tr >
    <td>
    <input type="button" value="1" name="b1" onClick="SetExp('1')">
    </td>
    <td>
    <input type="button" value="2" name="b2" onClick="SetExp('2')">
    </td>
    <td>
        <input type="button" value="3" name="b3" onClick="SetExp('3')">
        </td>
        </tr>
        <tr >
        <td>
        <input type="button" value="4" onClick="SetExp('4')">
        </td>
        <td>
        <input type="button" value="5" onClick="SetExp('5')">
        </td>
        <td>
        <input type="button" value="6" onClick="SetExp('6')">
        </td>
        </tr>
        <tr >
        <td>
        <input type="button" value="7" onClick="SetExp('7')">
       </td>
        <td>
        <input type="button" value="8" onClick="SetExp('8')">
        </td>
        <td>
        <input type="button" value="9" onClick="SetExp('9')">
        </td>
        </tr>
        <tr >
        <td>
      <input type="button" value="0" onClick="SetExp('0')">
        </td>
        <td>
        <input type="button" value="." onClick="SetExp('.')">
        </td>
        <td>
        <input type="button" value="C" onClick="Clear()">
        </td>
        </tr>
        <tr >
        <td>
        <input type="button" value="+" name="b4" onClick="SetExp('+')">
        </td>
        <td>
    
    <input type="button" value="-" name="b6" onClick="SetExp('-')">
        </td>
        <td>
        <input type="button" value="*" name="b5" onClick="SetExp('*')">
        </td>
        </tr>
        <tr>
        <td>
        <input type="button" value="/" name="b7" onClick="SetExp('/')">
    
    </td>
        <td colspan="2">
    
    <input type="button" value="=" name="b8" onClick="Cal()">
        </td>
        </tr>
        </table>
        </form>
     -->
   <!-- <style>
       div{
           font-size: 24px;
       }
       #box{
           width: 400px;
           height: 500px;
           
           border: 1px solid #f2f2f2;
       }
       #box div{
           float: left;
           width: 100px;
           height: 100px;
           text-align: center;
           line-height: 100px;
           background-color: #f2f2f2;
           box-sizing: border-box;
           border: 1px solid #999;
           cursor: pointer;
       }
       #box div:hover{
           background-color: rgb(219, 82, 28);
           color: #fff;
       }
       #box #show{
           width: 300px;
           height: 100px;
           cursor: text;
           text-align: left;
           background-color: #fff;
       }
   /* </style>
    <div id="box">
        <div id="show"></div> 
        <div id="clear">C</div>
        <div id="btn-1">1</div> 
       <div id="btn-2">2</div>
        <div id="btn-3">3</div>
        <div id="btn-equal">=</div>
        <div id="btn-4">4</div> 
       <div id="btn-5">5</div>
        <div id="btn-6">6</div>
         <div id="btn-subtract">-</div>
         <div id="btn-7">7</div> 
       <div id="btn-8">8</div>
        <div id="btn-9">9</div>
        <div id="btn-divide">/</div>
        <div id="btn-multiply">*</div>
        <div id="btn-0">0</div>
         <div id="btn-point">.</div>
         <div id="btn-sum">+</div>
    </div> */ -->
    
<script >
    //全局变量
    var Number1 = "";
    var Number2 = "";
    var NewNumber = "blank";
    var opvalue = "";
    //显示文本
    function Display(displaynumber) {
    document.myform.result.value = displaynumber;
    }
    function SetExp(result){
    if(result=='+' || result=='-' || result=='*' || result=='/'){
    if(document.myform.result.value==""){
    return;
    }
    var opvalue = result;
    if(opvalue == '+'){  
    AddButton(0);
    Number2 = "";
    opvalue = "";
    }
    if(opvalue == '-') {SubButton(0);
    Number2 = "";
    opvalue = "";
    }
    if(opvalue == '*') {
    MultButton(0);
    Number2 = "";
    opvalue = "";}
    if(opvalue == '/'){ DivButton(0);
    Number2 = "";
    opvalue = "";}
    }
    else{
    if(result == ".") {
    Number = document.myform.result.value;
    if(Number.indexOf(".") != -1) {
    result = "";
    }
    }
    if(NewNumber == "yes") {
    Number2 += result;
    Display(Number2);
    }
    else {
    if(NewNumber == "blank") {
    Number1 = result;
    Number2 = "";
    NewNumber = "no";
    }
    else {
    Number1 += document.myform.result.value;
    }
    Display(Number1);
    }
    }
    }
    function Cal(){
    if(opvalue == '+') AddButton(0);
    if(opvalue == '-') SubButton(0);
    if(opvalue == '*') MultButton(0);
    if(opvalue == '/') DivButton(0);
    Number2 = "";
    opvalue = "";
    }
    function Clear(){
    Number1 = "";
    Number2 = "";
    NewNumber = "blank";
    Display("");
    }
    //加减乘除运算
    function AddButton(x) {
    if(x == 1) EqualButton();
    if(Number2 != "") {
    Number1 = parseFloat(Number1) + parseFloat(Number2);
    }
    NewNumber = "yes";
    opvalue = '+';
    Display(Number1);
    }
    function SubButton(x) {
    if(x == 1) EqualButton();
    if(Number2 != "") {
    Number1 = parseFloat(Number1) - parseFloat(Number2);
    }
    NewNumber = "yes";
    opvalue = '-';
    Display(Number1);
    }
    function MultButton(x) {
    if(x == 1) EqualButton();
    if(Number2 != "") {
    Number1 = parseFloat(Number1) * parseFloat(Number2);
    }
    NewNumber = "yes";
    opvalue = '*';
    Display(Number1);
    }
    function DivButton(x) {
    if(x == 1) EqualButton();
    if(Number2 != "") {
    Number1 = parseFloat(Number1) / parseFloat(Number2);
    }
    NewNumber = "yes";
    opvalue = '/';
    Display(Number1);
    }
    </script>
    
    

        
</body>
</html>